<template lang="pug">
.index
  .section-row
    .section-col
      .section-col-hd
        .user-info
          .user-info-container
            .user-head(:style="{ 'background-image': `url(https://erp.jaid.cn/Material/static_files/images/head.png)` }")
            .user-info-bd
              .user-info-welcome {{userInfo.userName}}，欢迎进入平台管理中心！
              .user-info-time 上次登录：{{userInfo.loginTime}}
          .user-info-handle(@click="settingMenu")
            .iconfont.icon-setting
        .section-col-nav
          router-link.nav-col(v-for="item, index in navbars", :to="{ name: item.routerName, query: { ...item.query } }", :key="index")
            .nav-col-icon(:style="{ 'background-color': item.color }")
              .iconfont(:class="item.icon")
            .nav-col-title {{item.value}}
      .section-card.section-plat-card
        .section-card-hd
          .section-card-title
            .section-card-title_bd 平台数据
          .section-card-handle
            el-select(v-model="platDay" size="small" @change="changePlatDay")
              i.el-input__icon.el-icon-date(slot="prefix")
              el-option(v-for="item, index in days", :key="index", :label="item.label", :value="item.value")
        .section-card-bd.section-plat-bd
          .plat-card-row(v-for="row in platkeys")
            .plat-card-col(v-for="col in row")
              .plat-card-col-bd
                .plat-card-col-title {{col.title}}
                .plat-card-col-params
                  i.iconfont.icon-setting
                  strong {{col.value}}
              .plat-card-col-line
                .iconfont.icon-line
                .plat-card-col-percent +{{col.percentValue}}%
    .section-col
      .section-card.section-card-notice
        .section-card-hd
          .section-card-title
            .section-card-title_bd 信息公告
          .section-card-handle
            el-button(icon="el-icon-plus" name="warning" size="small" v-if="$permission('AB-00001-001')" @click="editNotice") 发布公告
            el-button(size="small" name="info" @click="seeNotice" v-if="$permission('AM-00001-000')")
              span 查看更多
              i.el-icon-arrow-right.el-icon--right
        .notice-list
          .notice-item(v-for="item in notices" :class="item.typeNumber | filterNoticeType" @click="seeNoticeDetail(item)")
            .notice-item-type {{item.type}}
            .notice-item-content {{item.title}}
            .notice-item-time {{item.createTime}}
  .section-row
    .section-col
      .section-card.section-plat-material
        .section-card-hd
          .section-card-title
            .section-card-title_bd 材料统计
            .section-chart-selects
              .chart-select-item.new(@click="changeStatus('现有材料')") 现有材料
              .chart-select-item.add(@click="changeStatus('新增材料')") 新增材料
          .section-card-handle
            el-date-picker(
              v-model="materialTime"
              size="small"
              type="monthrange"
              :clearable="false"
              @change="changeDatePicker"
              :picker-options="pickerOptions"
              format="yyyy-MM"
              value-format="yyyy-MM"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
            )
        .section-card-bd.section-card-material
          #material-echart
    .section-col
      .section-card.section-plat-material
        .section-card-hd
          .section-card-title
            .section-card-title_bd 供应商排行
          .section-card-handle
            el-select(v-model="supplierDay" size="small" @change="changeSupplierDay")
              i.el-input__icon.el-icon-date(slot="prefix")
              el-option(v-for="item, index in days", :key="index", :label="item.label", :value="item.value")
        .section-card-bd.section-card-material
          #supplier-echart
  .section-row
    .section-col
      .section-card.section-plat-material
        .section-card-hd
          .section-card-title
            .section-card-title_bd 用户统计
            .section-chart-selects
              .chart-select-item.new(@click="changeUserStatus('设计师')") 设计师
              .chart-select-item.add(@click="changeUserStatus('供应商')") 供应商
          .section-card-handle
            el-date-picker(
              v-model="userStatistic"
              size="small"
              type="year"
              :clearable="false"
              @change="changeUserDatePicker"
              :picker-options="pickerYearOptions"
              format="yyyy"
              value-format="yyyy"
              placeholder="请选择年份"
            )
        .section-card-bd.section-card-material
          #user-echart
    .section-col
      .section-card.section-plat-material
        .section-card-hd
          .section-card-title
            .section-card-title_bd 其他统计
            .section-chart-selects
              .chart-select-item.new(@click="changeBrandStatus(brandType == '1' ? '新增品牌' : '新增案例')") {{brandType == '1' ? '新增品牌' : '新增案例'}}
              .chart-select-item.add(@click="changeBrandStatus(brandType == '1' ? '所有品牌' : '所有案例')") {{brandType == '1' ? '所有品牌' : '所有案例'}}
          .section-card-handle
            .brand-type-select
              el-select(v-model="brandType" size="small" @change="changeBrandType")
                el-option(label="品牌统计" value="1")
                el-option(label="案例统计" value="2") 
            el-date-picker(
              v-model="brandDays"
              size="small"
              type="year"
              :clearable="false"
              @change="changeBrandDatePicker"
              :picker-options="pickerYearOptions"
              format="yyyy"
              value-format="yyyy"
              placeholder="请选择年份"
            )
        .section-card-bd.section-card-material
          #brand-echart
  .section-row
    .section-col(v-if="showDom")
      .section-card
        .section-card-hd
          .section-card-title
            .section-card-title_bd 审核列表
          .section-card-handle
            .audit-select
              el-select(v-model="auditsSelectType" size="small" @change="chaneAudits")
                el-option(v-for="item, index in auditsSelects", :key="index", :value="item.value", :label="item.label")
            el-button(size="small" name="info" @click="seeListMore" v-if="showAuditBtn")
              span 查看更多
              i.el-icon-arrow-right.el-icon--right
        .section-card-bd.section-card-audit
          .audit-item(v-for="item in audits")
            .audit-item-name(v-if="auditsSelectType == 1") {{item.name}}
            .audit-item-name(v-if="auditsSelectType == 2") {{item.materialName}}
            .audit-item-name(v-if="auditsSelectType == 3") {{item.demandName}}
            .audit-item-name(v-if="auditsSelectType == 4") {{item.projectName}}
            .audit-item-name(v-if="auditsSelectType == 5") {{item.orderNo}}
            .audit-item-name(v-if="auditsSelectType == 6") {{item.companyName}}
            .audit-item-company(v-if="auditsSelectType == 1") {{item.brandCompany}}
            .audit-item-company(v-if="auditsSelectType == 2") {{item.companyName}}
            .audit-item-company(v-if="auditsSelectType == 3") {{item.userName}}
            .audit-item-company(v-if="auditsSelectType == 4") {{item.companyName}}
            .audit-item-company(v-if="auditsSelectType == 5") {{item.designerName}}
            .audit-item-company(v-if="auditsSelectType == 6")
              .tag-item(v-for="row in item.styleList") {{row.styleName}}
            .audit-item-ft
              .audit-item-status
                .audit-item-status-label
                span 未审核
              //- .iconfont.el-icon-arrow-right(@click="goDetail(item)")
    .section-col
      .section-card
        .section-card-hd
          .section-card-title
            .section-card-title_bd 白皮书列表
          .section-card-handle
            el-button(size="small" name="info" @click="seeBooks")
              span 查看更多
              i.el-icon-arrow-right.el-icon--right
        .section-card-bd.section-card-audit
          .audit-item(v-for="item in booksList")
            .audit-item-name
              img(src="../static/images/pdf.png")
              span {{item.bookName}}
            .audit-item-company {{item.userName}}
            .audit-item-handle
              .iconfont.icon-see(@click="onlineView(item)")
              .iconfont.icon-download(@click="exportWord(item)" v-if="$permission('AB-07003-001')")
  menus-select-modal(:show="showMenusModal", :activeMenus="activeMenus" @close="closeModal" @confirm="confirmModal")
  notice-dialog(:show="showDialog", :item="currentItem" @close="closeDialog")
  edit-notice-dialog(:show="showEditDialog" @close="closeEditDialog" @confirm="confirm")
</template>

<script>
import menusSelectModal from '@/components/modal/menusSelectModal'
import noticeDialog from '@/components/modal/noticeDialog'
import editNoticeDialog from '@/components/modal/editNoticeDialog'
import { getQuickMenu, getStatisticBrief, getMaterialData, getSupplierOrder, getUserStatistic, getOtherStatistic, getAduitList, getMaterialBooks, getPdfByCategory, previewByCategory, getMessageList } from 'api'
import { mapState } from 'vuex'
export default {
  name: 'index',
  components: {
    menusSelectModal,
    noticeDialog,
    editNoticeDialog
  },
  data () {
    return {
      showDialog: false,
      currentItem: {},
      showMenusModal: false,
      myChart: '',
      mySupplierChart: '',
      platDay: '1',
      supplierDay: '1',
      brandType: '1',
      userStatistic: `${new Date().getFullYear()}`,
      selectTime: Date.now() - 24 * 60 * 60 * 1000,
      maxDate: '',
      minDate: '',
      head: require('../static/images/Rectangle_159.png'),
      days: [
        { label: '7天', value: '1' },
        { label: '15天', value: '2' },
        { label: '30天', value: '3' },
        { label: '今年', value: '4' }
      ],
      showEditDialog: false,
      booksList: [],
      materialTime: [`${new Date(new Date().getTime() - (1000 * 60 * 60 * 24 * 30 * 6)).format('yyyy-MM')}`, `${new Date().format('yyyy-MM')}`],
      brandDays: `${new Date().format('yyyy')}`,
      platkeys: [
        [
          { title: '新增设计师', key: 'designerCount', value: '', percentKey: 'designerRate', percentValue: '', icon: '', lineIcon: '' },
          { title: '新增供应商', key: 'supplierCount', value: '', percentKey: 'supplierRate', percentValue: '', icon: '', lineIcon: '' },
          { title: '新增品牌', key: 'brandCount', value: '', percentKey: 'brandRate', percentValue: '', icon: '', lineIcon: '' },
          { title: '新增电子拼板', key: 'compositionCount', value: '', percentKey: 'compositionRate', percentValue: '', icon: '', lineIcon: '' }
        ],
        [
          { title: '新上架材料', key: 'materialCount', value: '', percentKey: 'materialRate', percentValue: '', icon: '', lineIcon: '' },
          { title: '新增案例', key: 'caseCount', value: '', percentKey: 'caseRate', percentValue: '', icon: '', lineIcon: '' },
          { title: '新增找材', key: 'postCount', value: '', percentKey: 'postRate', percentValue: '', icon: '', lineIcon: '' },
          { title: '新增白皮书', key: 'bookCount', value: '', percentKey: 'bookRate', percentValue: '', icon: '', lineIcon: '' }
        ]
      ],
      navbars: [],
      notices: [],
      auditsSelectType: 1,
      auditsSelects: [
        { value: 1, label: '品牌审核列表' },
        { value: 2, label: '材料审核列表' },
        { value: 3, label: '找材审核列表' },
        { value: 4, label: '案例审核列表' },
        { value: 5, label: '订单审核列表' },
        { value: 6, label: '供应商注册审核列表' }
      ],
      audits: [],
    }
  },
  computed: {
    pickerYearOptions () {
      return {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      }
    },
    pickerOptions () {
      let _this = this
      return {
        disabledDate(time) {
          const times =  86400000 * 30 * 12 // 12个月的毫秒数
          let curSelectTime = new Date(_this.minDate).getTime()
          let before = curSelectTime - times // 前12个月的毫秒数
          let after = curSelectTime + times // 后12周毫秒数
          if (!_this.minDate) return time.getTime() > Date.now()
          else return (time.getTime() > after || time.getTime() < before) && time.getTime() > Date.now()
        },
        onPick({maxDate, minDate}) {
          if (!maxDate) {
            _this.minDate = minDate
          }
        }
      }
    },
    activeMenus () {
      return this.navbars.map(item => item.value)
    },
    ...mapState({
      permissionList: state => state.user.user.permissionList,
      userInfo: state => state.user.user.userInfo
    }),
    showAuditBtn () {
      switch (this.auditsSelectType) {
        case 1: 
          return this.permissionList.some(item => item === 'AB-03002-001')
          break;
        case 2:
          return this.permissionList.some(item => item === 'AB-04001-001')
          break;
        case 3:
          return this.permissionList.some(item => item === 'AB-04003-001')
          break;
        case 4:
          return this.permissionList.some(item => item === 'AB-07001-001')
          break;
        case 5:
          return this.permissionList.some(item => item === 'AB-07002-001')
          break;
        case 6:
          return this.permissionList.some(item => item === 'AB-02002-001')
          break;
        default:
          return false
      }
    },
    showDom () {
      const filter = ['AB-03002-001', 'AB-04001-001', 'AB-04003-001', 'AB-07001-001', 'AB-07002-001', 'AB-02002-001']
      return this.permissionList.some(item => {
        return filter.includes(item)
      })
    }
  },
  methods: {
    seeNotice () {
      this.$router.push({ name: 'notice' })
    },
    seeListMore () {
      switch (this.auditsSelectType) {
        case 1: 
          this.$router.push({ name: 'auditList' })
          break;
        case 2:
          this.$router.push({ name: 'materialAuditList' })
          break;
        case 3:
          this.$router.push({ name: 'findMaterialAuditList' })
          break;
        case 4:
          this.$router.push({ name: 'otherCaseAuditList' })
          break;
        case 5:
          this.$router.push({ name: 'orderAuditList' })
          break;
        case 6:
          this.$router.push({ name: 'supplierAuditList' })
          break;
      }
    },
    seeBooks () {
      this.$router.push({ name: 'books' })
    },
    editNotice () {
      this.showEditDialog = true
    },
    seeNoticeDetail (item) {
      this.showDialog = true
      this.currentItem = item
    },
    closeDialog () {
      this.showDialog = false
      this.currentItem = {}
    },
    closeEditDialog () {
      this.showEditDialog = false
    },
    confirm () {
      this.getMessageList()
      this.showEditDialog = false
    },
    goDetail (item) {
      switch (this.auditsSelectType) {
        case 1: 
          this.$router.push({ name: 'auditList' })
          break;
        case 2:
          this.$router.push({ name: 'materialAuditList' })
          break;
        case 3:
          this.$router.push({ name: 'findMaterialAuditList' })
          break;
        case 4:
          this.$router.push({ name: 'otherCaseAuditList' })
          break;
        case 5:
          this.$router.push({ name: 'orderAuditList' })
          break;
        case 6:
          this.$router.push({ name: 'supplierAuditList' })
          break;
      }
    },
    settingMenu () {
      this.showMenusModal = true
    },
    closeModal () {
      this.showMenusModal = false
    },
    confirmModal (data) {
      this.showMenusModal = false
      this.navbars = data
    },
    changeDatePicker (e) {
      this.materialTime = e
      this.getMaterialData()
    },
    changeStatus (key) {
      this.myChart.dispatchAction({
        type: 'legendToggleSelect',
        name: key
      })
    },
    changeUserStatus (key) {
      this.myUserChart.dispatchAction({
        type: 'legendToggleSelect',
        name: key
      })
    },
    changeBrandStatus (key) {
      this.myBrandChart.dispatchAction({
        type: 'legendToggleSelect',
        name: key
      })
    },
    changePlatDay () {
      this.getStatisticBrief()
    },
    
    async getQuickMenu () {
      try {
        const { ResultSet } = await this.$axios.post(getQuickMenu)
        this.navbars = JSON.parse(ResultSet.userData.data)
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async getStatisticBrief () {
      try {
        const { ResultSet } = await this.$axios.post(getStatisticBrief, { type: this.platDay })
        let userData = ResultSet.userData
        this.platkeys.forEach(row => {
          row.forEach(col => {
            col.value = ResultSet.userData[col.key]
            col.percentValue = (ResultSet.userData[col.percentKey] * 100).toFixed(0)
          })
        })
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async getMaterialData () {
      try {
        const { ResultSet } = await this.$axios.post(getMaterialData, { startDate: this.materialTime[0], endDate: this.materialTime[1] })
        this.myChart = this.$echarts.init(document.getElementById('material-echart'))
        let chartOptions = {
          grid: {
            left: '0%',
            right: '0%',
            bottom: '5%',
            containLabel: true
          },
          legend: {
            show: false,
            data: ['现有材料', '新增材料']
          },
          xAxis: {
            type: 'category',
            axisTick: {
              show: false
            },
            z: 2,
            axisLabel: {
              color: '#3E4373',
              interval: 0,
              fontSize: 14
            },
            data: []
          },
          yAxis: {
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            },
            axisLabel: {
              color: '#3E4373',
              fontSize: 14
            },
            z: 1
          },
          tooltip: {
            backgroundColor: '#3B3E5C',
            padding: 16,
            textStyle: {
              color: '#fff'
            },
            show: true,
            trigger: 'axis',
            borderWidth: 0,
            axisPointer: {
              type: 'line',
              lineStyle: {
                color:'#fff',
                width: 42,
                type: 'solid',
                shadowColor: '#E3E5F3',
                shadowBlur: 40,
                // shadowOffsetX: 3,
                // shadowOffsetY: -3
              },
              z: 1,
              borderRadius: 6
            }
          },
          series: [
            {
              data: [],
              barWidth: 42,
              z: 0,
              showBackground: true,
              backgroundStyle: {
                color: '#F7F7FD',
                borderRadius: 6
              },
              type: 'bar',
              tooltip: {
                show: false
              },
              itemStyle: {
                color: 'transparent',
              }
            },
            {
              name: '现有材料',
              key: 'nowCount',
              data: [],
              type: 'line',
              smooth: true,
              z: 3,
              symbol: 'circle',
              symbolSize: 15,
              emphasis: {
                scale: 3,
                itemStyle: {
                  color: '#fff',
                  borderColor: '#8676FF',
                  borderWidth: 6,
                }
              },
              itemStyle: {
                color: '#8676FF',
                borderColor: '#fff',
                borderWidth: 3,
              }
            },
            {
              name: '新增材料',
              key: 'newCount',
              data: [],
              type: 'line',
              smooth: true,
              z: 3,
              symbol: 'circle',
              symbolSize: 15,
              emphasis: {
                scale: 3,
                itemStyle: {
                  color: '#fff',
                  borderColor: '#FF708B',
                  borderWidth: 6,
                }
                
              },
              itemStyle: {
                color: '#FF708B',
                borderColor: '#fff',
                borderWidth: 3,
              }
            }
          ]
        }
        let xAxisData = this.setTimeLag(this.materialTime)
        let chartData = ResultSet.userData.data
        let newCount = []
        let nowCount = []
        chartData.forEach(item => {
          newCount.push(item.newCount)
          nowCount.push(item.nowCount)
        })
        let arrs = [...newCount, ...nowCount]
        chartOptions.series.forEach(item => {
          if (item.key === 'newCount') item.data = newCount
          if (item.key === 'nowCount') item.data = nowCount
        })
        chartOptions.series[0].data = Array.apply(null, { length: chartData.length }).fill(Math.max(...arrs))
        chartOptions.xAxis.data = xAxisData
        this.myChart.setOption(chartOptions)
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    changeSupplierDay () {
      this.getSupplierOrder()
    },
    async getSupplierOrder () {
      try {
        const { ResultSet } = await this.$axios.post(getSupplierOrder, { type: this.supplierDay })
          this.mySupplierChart = this.$echarts.init(document.getElementById('supplier-echart'))
          let chartOption = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '0%',
              right: '2%',
              bottom: '5%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'dashed'
                }
              },
              axisLabel: {
                color: '#3E4373',
                interval: 0,
                fontSize: 14
              },
            },
            yAxis: {
              type: 'category',
              inverse: true,
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'dashed'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                color: '#3E4373',
                overflow: 'break',
                lineHeight: 20,
                width: 154,
                fontSize: 14
              },
              data: ['深圳市能源建材有限公司', '深圳市能源建材股份有限公司', '深圳市能有限公司', '深圳市建材有限公司', '深圳市能源有限公司']
            },
            tooltip: {
              backgroundColor: '#3B3E5C',
              padding: 16,
              textStyle: {
                color: '#fff'
              },
              show: true,
              borderWidth: 0,
            },
            series: [
              {
                type: 'bar',
                colorBy: 'data',
                color: ['#FF708B', '#FBB142', '#30D987', '#8676FF', '#8655FA'],
                barWidth: 10,
                data: [300, 210, 200, 220, 100],
                showBackground: true,
                backgroundStyle: {
                  color: '#F6F6FA',
                  borderRadius: 2
                },
                itemStyle: {
                  borderRadius: 2
                }
              }
            ]
          }
          let list = ResultSet.userData.supplierRank
          let yAxisData = []
          let seriesData = []
          list.forEach(item => {
            yAxisData.push(item.companyName)
            seriesData.push(item.materialCount)
          })
          chartOption.yAxis.data = yAxisData
          chartOption.series[0].data = seriesData
          // 绘制图表
          this.mySupplierChart.setOption(chartOption)
        
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    changeUserDatePicker () {
      this.getUserStatistic()
    },
    async getUserStatistic () {
      try {
        const { ResultSet } = await this.$axios.post(getUserStatistic, { year: this.userStatistic })
        this.myUserChart = this.$echarts.init(document.getElementById('user-echart'))
        let chartOption = {
          tooltip: {
            backgroundColor: '#3B3E5C',
            padding: 16,
            textStyle: {
              color: '#fff'
            },
            show: true,
            trigger: 'axis',
            borderWidth: 0,
            axisPointer: {
              type: 'line',
              lineStyle: {
                color:'#fff',
                width: 48,
                type: 'solid',
                shadowColor: '#E3E5F3',
                shadowBlur: 40,
                // shadowOffsetX: 3,
                // shadowOffsetY: -3
              },
              z: 1,
              borderRadius: 6
            }
          },
          legend: {
            show: false,
            data: ['设计师', '供应商']
          },
          grid: {
            left: '0%',
            right: '2%',
            bottom: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              color: '#3E4373',
              interval: 0,
              fontSize: 14
            },
            axisTick: {
              show: false
            },
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
          },
          yAxis: {
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          series: [
            {
              name: '设计师',
              type: 'bar',
              key: 'designerCount',
              // colorBy: 'data',
              stack: 'ad',
              color: '#8676FF',
              arCategoryGap: '100%',
              barWidth: 26,
              data: [],
              itemStyle: {
                // borderWidth: 1,
                // borderColor: '#fff',
              //   borderRadius: 2
              }
            },
            {
              name: '供应商',
              type: 'bar',
              key: 'supplierCount',
              stack: 'ad',
              color: '#FF708B',
              barWidth: 26,
              barCategoryGap: '100%',
              data: [],
              itemStyle: {
                // borderWidth: 1,
                // borderColor: '#fff',
                borderRadius: [4, 4, 0, 0]
              }
            }
          ]
        }
        let designerCount = []
        let supplierCount = []
        ResultSet.userData.userData.forEach(item => {
          designerCount.push(item.designerCount)
          supplierCount.push(item.supplierCount)
        })
        chartOption.series[0].data = designerCount
        chartOption.series[1].data = supplierCount
        // 绘制图表
        this.myUserChart.setOption(chartOption)
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    changeBrandDatePicker () {
      this.getOtherStatistic()
    },
    changeBrandType () {
      this.getOtherStatistic()
    },
    async getOtherStatistic () {
      try {
        const { ResultSet } = await this.$axios.post(getOtherStatistic, { year: this.brandDays, type: this.brandType })
        this.myBrandChart = this.$echarts.init(document.getElementById('brand-echart'))
        let chartOption = {
          tooltip: {
            backgroundColor: '#3B3E5C',
            padding: 16,
            textStyle: {
              color: '#fff'
            },
            show: true,
            trigger: 'axis',
            borderWidth: 0,
            axisPointer: {
              type: 'line',
              lineStyle: {
                color:'#fff',
                width: 48,
                type: 'solid',
                shadowColor: '#E3E5F3',
                shadowBlur: 40,
                // shadowOffsetX: 3,
                // shadowOffsetY: -3
              },
              z: 1,
              borderRadius: 6
            }
          },
          legend: {
            show: false,
            data: ['新增品牌', '所有品牌']
          },
          grid: {
            left: '0%',
            right: '2%',
            bottom: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            // splitLine: {
            //   show: true,
            //   lineStyle: {
            //     type: 'dashed'
            //   }
            // },
            axisLabel: {
              color: '#3E4373',
              interval: 0,
              fontSize: 14
            },
            axisTick: {
              show: false
            },
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
          },
          yAxis: {
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          series: [
            {
              name: '新增品牌',
              type: 'bar',
              // colorBy: 'data',
              color: '#8676FF',
              barWidth: 16,
              data: [],
              itemStyle: {
                borderRadius: [4, 4, 0, 0]
              }
            },
            {
              name: '所有品牌',
              type: 'bar',
              color: '#FF708B',
              barWidth: 16,
              barGap: '0',
              data: [],
              itemStyle: {
                borderRadius: [4, 4, 0, 0]
              }
            }
          ]
        }
        let newCount = []
        let nowCount = []
        ResultSet.userData.statisticData.forEach(item => {
          newCount.push(item.newCount)
          nowCount.push(item.nowCount)
        })
        chartOption.series[0].data = newCount
        chartOption.series[1].data = nowCount
        if (this.brandType === '1') {
          chartOption.legend.data = ['新增品牌', '所有品牌']
          chartOption.series[0].name = '新增品牌'
          chartOption.series[1].name = '所有品牌'
        } else {
          chartOption.legend.data = ['新增案例', '所有案例']
          chartOption.series[0].name = '新增案例'
          chartOption.series[1].name = '所有案例'
        }
        // 绘制图表
        this.myBrandChart.setOption(chartOption)
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async onlineView (item) {
      let url = `${previewByCategory}?bookNo=${item.bookNo}&category=${this.category}`
      window.open(`/pdf/web/viewer.html?file=${encodeURIComponent(url)}`)
    },
    async exportWord (item) {
      try {
        let src = `${getPdfByCategory}`
        let iframe = document.createElement('iframe')
        iframe.setAttribute('id', 'down-file-iframe')
        let form = document.createElement('form')
        form.setAttribute('id', 'down-form')
        form.setAttribute('target', 'down-file-iframe')
        form.setAttribute('method', 'post')
        form.setAttribute('action', src)
        document.body.appendChild(form)
        let input1 = document.createElement('input')
        input1.setAttribute('type', 'hidden')
        input1.setAttribute('name', 'bookNo')
        input1.setAttribute('value', item.bookNo)
        form.appendChild(input1)
        let input2 = document.createElement('input')
        input2.setAttribute('type', 'hidden')
        input2.setAttribute('name', 'category')
        input2.setAttribute('value', this.category)
        form.appendChild(input2)
        document.body.appendChild(iframe)
        iframe.contentWindow.document.body.appendChild(form)
        form.submit()
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    setTimeLag (times) {
      let xAxisData = []
      let startTime = new Date(times[0])
      let endTime = new Date(times[1])
      let usedTime = endTime - startTime
      let Months = Math.floor(usedTime / (24 * 3600 * 1000) / 30)
      for (let i = 0; i <= Months; i++) {
        xAxisData.push(new Date(new Date(times[0]).setMonth((new Date(times[0]).getMonth() + i))).format('yyyy-MM'))
      }
      return xAxisData
    },
    chaneAudits () {
      this.getAduitList()
    },
    async getMessageList () {
      try {
        const { ResultSet } = await this.$axios.post(getMessageList, { currentPage: 1, pageLines: 8 })
        this.notices = ResultSet.userData.announcements
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async getAduitList () {
      try {
        const { ResultSet } = await this.$axios.post(getAduitList, { type: this.auditsSelectType })
        if (this.auditsSelectType === 1) this.audits = ResultSet.userData.loadBrandList
        else if (this.auditsSelectType === 2) this.audits = ResultSet.userData.result
        else if (this.auditsSelectType === 3) this.audits = ResultSet.userData.findList
        else if (this.auditsSelectType === 4) this.audits = ResultSet.userData.materialCaseList
        else if (this.auditsSelectType === 5) this.audits = ResultSet.userData.orderList
        else if (this.auditsSelectType === 6) this.audits = ResultSet.userData.result
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async getMaterialBooks () {
      try {
        const { ResultSet } = await this.$axios.post(getMaterialBooks, { currentPage: 1, pageLines: 8 })
        this.booksList = ResultSet.userData.materialBooks
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    init () {
      this.getQuickMenu()
      this.getStatisticBrief()
      this.getMessageList()
      this.getMaterialData()
      this.getSupplierOrder()
      this.getUserStatistic()
      this.getOtherStatistic()
      this.getAduitList()
      this.getMaterialBooks()
    }
  },
  beforeCreate() {
    console.log(this)
  },
  created() {
    console.log(this)
  },
  async mounted () {},
  beforeRouteEnter (to, from, next) {
    next(async vm => {
      vm.init()
    })
  }
}
</script>

<style type="text/css" lang="scss">
.section-card-handle{
  .el-date-editor--year,
  .el-select {
    width: 100px;
  }
}
</style>

<style lang="scss" scoped>
.index {
  padding: 14px 8px;
  min-width: 1600px;
}
.section-row {
  display: flex;
}
.section-card-handle {
  display: flex;
  align-items: center;
  .brand-type-select {
    margin-right: 15px;
  }
}
.section-col {
  width: 50%;
  margin: 0 8px 20px;
}
.section-col-hd {
  padding: 0 16px;
}
.user-info {
  display: flex;
  justify-content: space-between;
  padding-top: 18px;
}
.user-info-container {
  display: flex;
  align-items: center;
}
.user-head {
  width: 48px;
  height: 48px;
  border: 9px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.user-info-bd {
  margin-left: 16px;
}
.user-info-welcome {
  font-weight: bold;
  font-size: 18px;
  line-height: 26px;
  color: #3E4373;
}
.user-info-time {
  margin-top: 8px;
  font-size: 12px;
  line-height: 20px;
  color: #8B8EAB;
}
.user-info-handle {
  .iconfont {
    font-size: 24px;
    color: #C4C4C4;
  }
}
.section-col-nav {
  margin-top: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-col {
  width: 120px;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #FAFAFE;
  box-shadow: 0px 40px 80px rgba(41, 72, 152, 0.05), 0px 40px 50px rgba(41, 72, 152, 0.037963), 0px 22px 16px rgba(41, 72, 152, 0.025), 0px 2px 4px rgba(41, 72, 152, 0.012037);
  border-radius: 10px;
  cursor: pointer;
  transition: all .2s;
  &:hover {
    transform: translateY(-4px);
  }
}
.nav-col-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  .iconfont {
    color: #ffffff;
    font-size: 24px;
  }
}
.nav-col-title {
  margin-top: 8px;
  font-size: 14px;
  line-height: 24px;
  color: #3E4373;
}
.section-card {
  height: 100%;
  padding: 0 24px;
  background: #FFFFFF;
  border: 1px solid #F3F3F4;
  box-shadow: 0px 4px 0px #F3F3F4;
  border-radius: 10px;
}
.section-plat-card {
  margin-top: 32px;
  padding-bottom: 16px;
  height: auto;
}
.section-card-hd {
  padding: 12px 0;
  border-bottom: 1px solid #EDEDED;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.section-card-title {
  display: flex;
  align-items: center;
}
.section-card-title_bd {
  font-size: 16px;
  line-height: 24px;
  color: #3E4373;
}
.section-chart-selects {
  display: flex;
  align-items: center;
}
.chart-select-item {
  position: relative;
  margin-left: 24px;
  font-size: 12px;
  line-height: 20px;
  padding-left: 16px;
  color: #8B8EAB;
  cursor: pointer;
  &:before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  &.new {
    &:before {
      background-color: #8676FF;
    }
  }
  &.add {
    &:before {
      background-color: #FF708B;
    }
  }
}
.section-plat-bd {
  margin-top: 24px;
}
.plat-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.plat-card-col {
  width: 176px;
  padding: 8px 16px;
  background: #F8F8FB;
  box-shadow: 0px -11.6375px 79.625px rgba(0, 0, 0, 0.03);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.plat-card-col-title {
  font-size: 14px;
  line-height: 22px;
  color: #8B8EAB;
}
.plat-card-col-params {
  margin-top: 4px;
  color: #3E4373;
  .iconfont {
    margin-right: 8px;
    font-size: 16px;
  }
  strong {
    font-size: 24px;
    line-height: 30px;
  }
}
.plat-card-col-line {
  color: #30D987;
  text-align: center;
  .plat-card-col-percent {
    font-weight: bold;
    font-size: 12px;
    line-height: 16px;
  }
}
.section-card-notice {
  height: 100%;
}
.notice-list {
  margin-top: 8px;
}
.notice-item {
  position: relative;
  padding: 17px 8px;
  display: flex;
  align-items: center;
  cursor: pointer;
  &:before {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    content: '';
    width: 2px;
    height: 14px;
    border-radius: 2.45px;
  }
  &.danger {
    &:before {
      background: #FF708B;
    }
  }
  &.success {
    &:before {
      background: #30D987;
    }
  }
  &.warning {
    &:before {
      background: #FBB142;
    }
  }
  &.info {
    &:before {
      background: #EDEDED;
    }
  }
  &:nth-child(even) {
    background-color: #F8FAFD;
  }
  &:hover {
    background: #EFEFFE;
  }
}
.notice-item-type {
  font-weight: bold;
  font-size: 14px;
  line-height: 22px;
  padding-left: 10px;
  margin-right: 8px;
  color: #3E4373;
}
.notice-item-content {
  flex: 1;
  font-size: 14px;
  line-height: 22px;
  color: #3E4373;
}
.notice-item-time {
  font-size: 14px;
  line-height: 22px;
  color: #8B8EAB;
}
.section-plat-material {
  height: 418px;
}
.section-card-material {
  height: 360px;
  #material-echart,
  #supplier-echart,
  #user-echart,
  #brand-echart {
    width: 100%;
    height: 100%;
  }
}
.section-card-audit {
  padding: 8px 0 24px;
}
.audit-item {
  display: flex;
  align-items: center;
  padding: 12px 8px;
  &:nth-child(even) {
    background: #F8FAFD;
  }
  &:hover {
    background: #EFEFFE;
  }
}
.audit-item-name {
  flex: 1;
  font-size: 14px;
  line-height: 22px;
  color: #3E4373;
  display: flex;
  align-items: center;
  img {
    margin-right: 4px;
  }
}
.audit-item-company {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 22px;
  color: #64698F;
  flex: 2;
  text-align: center;
  .tag-item {
    padding: 1px 10px;
    background: rgba(134, 118, 255, 0.1);
    border-radius: 6px;
    margin: 0 4px;
    font-size: 14px;
    line-height: 22px;
    color: #64698F;
  }
}
.audit-item-handle {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  .iconfont {
    font-size: 24px;
    color: #B2B4C7;
    margin: 0 15px;
    cursor: pointer;
  }
}
.audit-item-ft {
  flex: 1;
  color: #64698F;
  font-size: 14px;
  line-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  .audit-item-status {
    display: flex;
    align-items: center;
    margin-right: 70px;
    .audit-item-status-label {
      display: inline-block;
      width: 8px;
      height: 8px;
      margin-right: 8px;
      border-radius: 50%;
      background: rgba(134, 118, 255, .5);
      position: relative;
      &:before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #8676FF;
      }
    }
  }
  .iconfont {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #F6F6F9;
    color: #B6B8CA;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.audit-select {
  margin-right: 16px;
}
</style>
